<template>
  <view class="root">
    <view class="top-bg"></view>
    <view class="content-wrapper">
      <view class="item-wrapper">
        <view class="business-name"> {{ detail.companyMessageInfo.companyName || "" }}</view>
        <view class="item">
          <view class="i-label">标准地址:</view>
          <view class="i-value">{{ detail.companyMessageInfo.standardAddress || "" }}</view>
        </view>
        <!-- <view class="item">
          <view class="i-label">详细地址:</view>
          <view class="i-value">{{ detail.companyMessageInfo.addressDetail || "" }}</view>
        </view> -->
        <view class="item">
          <view class="i-label">所属行业:</view>
          <view class="i-value">{{ detail.companyMessageInfo.industryInformationName || "" }}</view>
        </view>
        <view class="item last-item">
          <view class="i-label">法人姓名:</view>
          <view class="i-value">{{detail.companyMessageInfo.legalPersonName}}</view>
        </view>
      </view>
      <view class="item-wrapper center-wrapper">
        <view class="s-title">检查民警</view>
        <view class="center-content-container">
          <view class="item-left">
            <view class="c-item">
              <view class="c-label c-label-l">所属辖区</view>
              <view class="c-value"> {{ detail.policeCheckTaskInfo.jurisdictionName || "" }}</view>
            </view>
            <view class="c-item">
              <view class="c-label c-label-l">检查民/辅警</view>
              <view class="c-value">{{ detail.policeCheckTaskInfo.policeUserName || "" }}</view>
            </view>
            <view class="c-item">
              <view class="c-label c-label-l">警 号</view>
              <view class="c-value">{{ detail.policeCheckTaskInfo.policeUserNo || "暂无" }}</view>
            </view>
            <view class="c-item">
              <view class="c-label c-label-l">陪同民/辅警</view>
              <view class="c-value">
                {{detail.policeCheckTaskInfo.policeCheckTaskAuxiliaryInfoList.map(item => item.policeUserName).join('、')}}
              </view>
            </view>
            <view class="c-item">
              <view class="c-label c-label-l">签到照片</view>
              <view class="c-value look-text" @click="
                      pvwImage([
                        imgPrefix + detail.policeCheckTaskInfo.signPicture,
                      ])
                    ">查看</view>
            </view>
          </view>
          <view class="item-right">
            <image class="police-avatar" :src="
                  detail.policeCheckTaskInfo.policeUserImage
                    ? imgPrefix + detail.policeCheckTaskInfo.policeUserImage
                    : baseImgUrl + 'queryFace-01.png'
                " mode="aspectFill" @click="
                  pvwImage([
                    detail.policeCheckTaskInfo.policeUserImage
                      ? imgPrefix + detail.policeCheckTaskInfo.policeUserImage
                      : baseImgUrl + 'queryFace-01.png',
                  ])
                "></image>
          </view>
        </view>
        <u-line dashed margin="0 0 26rpx 0" color="#707070"></u-line>
        <!---->
        <view class="s-title">检查记录</view>
        <view class="c-item">
          <view class="c-label c-label-line">检查类型:</view>
          <view class="c-value"> {{ detail.policeCheckTaskInfo.industryExamineName || "" }}</view>
        </view>
        <view class="c-item">
          <view class="c-label c-label-line">检查内容:</view>
          <view class="c-value look-text"
            :data-url="`/goOverBag/siteInspectionContent/siteInspectionContent?taskId=${options.taskId}`"
            @click="handleClickRouter">查看</view>
        </view>
        <view class="c-item">
          <view class="c-label c-label-line">检查时间:</view>
          <view class="c-value"> {{ detail.policeCheckTaskInfo.checkTime || "" }}</view>
        </view>
        <view class="c-item">
          <view class="c-label c-label-line">检查结果:</view>
          <view class="c-value c-value-look-details">
            <view class="c-value-left"
              :class="detail.policeCheckTaskInfo.checkResult == 1 ? 'look-text' : 'check-no-pass'">
              {{
                  detail.policeCheckTaskInfo.checkResult == 1
                    ? "合格"
                    : "不合格"
                }}
            </view>
            <view class="look-text lookLink"
              :data-url="`/goOverBag/belowtheMark/nonGooverDetails?taskId=${detail.policeCheckTaskInfo.id}`"
              @click="handleClickRouter">查看详情></view>
          </view>
        </view>
        <view class="c-item">
          <view class="c-label c-label-line">责任人签名:</view>
        </view>
        <image class="img-sign" :src="
                  detail.policeCheckTaskInfo.principalSignatureUrl
                    ? imgPrefix +
                      detail.policeCheckTaskInfo.principalSignatureUrl
                    : baseImgUrl + 'queryFace-01.png'
                "></image>
        <!---->
        <view class="s-title">处罚结果</view>
        <view class="c-item">
          <view class="c-label">处罚决定:</view>
          <view class="c-value"> {{
                  detail.policeCheckUnqualifiedInfo.rectificationType == 1
                    ? "限期整改"
                    : "停业整顿"
                }}
            <block v-if="detail.policeCheckUnqualifiedInfo.isFined != 0">
              ,罚款{{ detail.policeCheckUnqualifiedInfo.finedMoney }}元
            </block>
          </view>
        </view>
        <view class="c-item">
          <view class="c-label">截止日期:</view>
          <view class="c-value">
            {{ detail.policeCheckUnqualifiedInfo.penaltyEndTime ?
         moment(detail.policeCheckUnqualifiedInfo.penaltyEndTime).format('YYYY/MM/DD') + ' 23:59:59' : "" 
         }}
          </view>
        </view>
        <view class="c-item">
          <view class="c-label">电子文书:</view>
          <view class="c-value look-text"
            :data-url="`/keepArecord/textBooks/textBooks?id=${detail.policeCheckUnqualifiedInfo.id}&fronttype=1`"
            @click="handleClickRouter">查看</view>
        </view>
      </view>
    </view>
    <view class="btn-wrapper">
      <navigator :url="`/todoItem/handleTodo?data=${encodeURIComponent(
          JSON.stringify(detail)
        )}`">
        <view class="btn-inner">处理</view>
      </navigator>
    </view>
  </view>
</template>

<script>
  import {
    findTaskDetail
  } from '../api/goover';

  import {
    pvwImage,
    handleClickRouter
  } from '@/utils/util.js'

  import moment from '../utils/moment';

  export default {
    data() {
      return {
        baseImgUrl: this.$baseImgUrl,
        options: {},
        detail: {},
        imgPrefix: uni.getStorageSync("imgPrefix"),
        options: {}
      }
    },
    onLoad(options) {
      this.options = options
      this.getList()
    },
    methods: {
      moment,
      pvwImage,
      handleClickRouter,
      getList() {
        findTaskDetail(this.options).then((res) => {
          if (res.code == 200) {
            this.detail = res.result;
          }
        });
      },
    }
  }
</script>

<style lang="scss">
  root {
    background: #F9F9F9;
  }
</style>
<style lang="scss" scoped>
  .root {
    width: 100%;

    .top-bg {
      height: 145rpx;
      background: #2488f5;
    }

    .content-wrapper {
      width: 718rpx;
      margin: 0 auto;
      margin-bottom: 130rpx;
      margin-top: -112rpx;

      .item-wrapper {
        background: #FFFFFF;
        box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(180, 180, 180, 0.1608);
        border-radius: 16rpx 16rpx 16rpx 16rpx;
        overflow: hidden;

        .business-name {
          font-weight: bold;
          font-size: 32rpx;
          color: #333333;
          height: 96rpx;
          display: flex;
          align-items: center;
          padding-left: 40rpx;
          background: #ECF9FF;
          margin-bottom: 18rpx;
        }

        .item {
          display: flex;
          margin-bottom: 30rpx;
          padding: 0 40rpx;

          .i-label {
            font-weight: 400;
            font-size: 26rpx;
            color: #A1A1A1;
            margin-right: 20rpx;
            flex-shrink: 0;
          }

          .i-value {
            font-weight: 500;
            font-size: 28rpx;
            color: #666666;
          }
        }

        .last-item {
          padding-bottom: 55rpx;
        }
      }

      .center-wrapper {
        padding: 26rpx 20rpx;
        position: relative;


        .s-title {
          font-weight: bold;
          font-size: 28rpx;
          color: #212020;
          position: relative;
          padding-left: 15rpx;
          margin-bottom: 26rpx;

          &:before {
            content: '';
            width: 8rpx;
            height: 24rpx;
            background: #2488F5;
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
          }
        }

        .center-content-container {
          display: flex;
          justify-content: space-between;

          .item-right {
            width: 200rpx;
            height: 236rpx;
            flex-shrink: 0;

            .police-avatar {
              width: 100%;
              height: 100%;
            }
          }
        }

        .c-item {
          display: flex;
          margin-bottom: 16rpx;

          .c-label {
            font-weight: 400;
            font-size: 26rpx;
            color: #A1A1A1;
            margin-right: 18rpx;
            width: 140rpx;
            text-align: justify;
            text-align-last: justify;
            flex-shrink: 0;
          }

          .c-label-line {
            width: auto;
          }

          .c-label-l {
            position: relative;

            &::after {
              content: ':';
              position: absolute;
              right: -6rpx;
            }
          }

          .c-value {
            font-weight: 500;
            font-size: 28rpx;
            color: #333333;
          }

          .c-value-look-details {
            display: flex;
            flex: 1;
            justify-content: space-between;
          }

          .look-text {
            font-weight: 500;
            font-size: 28rpx;
            color: #2488F5;
          }

          .check-no-pass {
            color: #EE1C1C;
          }
        }

        .img-sign {
          display: block;
          width: 639rpx;
          height: 271rpx;
          background: #F9F9F9;
          border-radius: 16rpx 16rpx 16rpx 16rpx;
          margin: 0 auto;
          margin-bottom: 32rpx;
        }
      }
    }



    .btn-wrapper {
      width: 750rpx;
      height: 120rpx;
      background: #FFFFFF;
      position: fixed;
      bottom: 0;
      left: 0;
      display: flex;
      align-items: center;
      justify-content: center;

      .btn-inner {
        width: 680rpx;
        height: 88rpx;
        background: rgba(192, 222, 252, 0.2588);
        border-radius: 44rpx 44rpx 44rpx 44rpx;
        border: 1rpx solid #ACCBEC;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 500;
        font-size: 36rpx;
        color: #2488F5;
      }
    }
  }
</style>